<!--为菜单添加路由
相对上一版本该表单只保留了页面一个录入项。
跳转路径只需要获取到菜单路径与页面路径名称进行拼接即可。
而页面文件名称在后台自动将首字母换成大写。
以上操作可减少录入错误的可能性
-->
<template>
  <div>
    <el-dialog :title="formTitle" v-model="visible" height="700px" width="400px" :close-on-click-modal=false>
      <div style="margin: 10px">
        <el-form label-position="top" label-width="80px" :model="formLabelAlign" ref="update_routes_form"
          :rules="sysMenuRules"><!--填写时必填字段必须要检验-->
          <el-form-item label="一级页面" prop="isFirst">
            <!--在调用form中的resetField函数时必须定义prop属性，属性名对应form表单的对应字段名，不定义会导致resetField无效-->
            <el-switch v-model="formLabelAlign.isFirst"></el-switch>
          </el-form-item>
          <el-form-item label="页面路径" prop="path">
            <el-input v-model="formLabelAlign.path"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="submit">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: "UpdateRoutesFormDialog",
  data() {
    return {
      visible: false,
      formTitle: "title",
      formLabelAlign: {
        routeId: null,
        menuId: null,
        menuPath: "",
        path: "",
        isFirst: false,
        actionType: ""
      },
      sysMenuRules: {  //检验规则
        path: [
          { required: true, message: "请输入路径名称", trigger: "blur" },
          { min: 3, message: "长度在3个字符以上", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    showDialog(routeId, menuId, isFirst, path, menuPath, cb) {
      this.visible = true;
      this.formLabelAlign.menuId = menuId;
      this.formLabelAlign.routeId = routeId;
      this.formLabelAlign.menuPath = menuPath;
      this.formLabelAlign.isFirst = isFirst === 1 ? true : false;
      this.formLabelAlign.path = path;
      this.cb = cb;
    },

    submit() {
      let me = this;
      let routesForm = me.$refs.update_routes_form;
      routesForm.validate((valid) => {/*提交表单前需要验证form表单是否合法*/
        if (!valid) return false;
        me.formLabelAlign.actionType = "routesUpdate";
        me.$post("/sysMenu", me.formLabelAlign, function (response) {
          let resault = response.success;
          if (resault) {
            me.$message.success("修改成功");//调用公共函数showMessage进行结果提示
            routesForm.resetFields();//操作成功后需要清空form表单，再次打开表单时不应该出现上次填写的记录
            me.visible = false;
            me.cb.call(null);
          } else {
            me.$message.error(response.message);
          }
        });
      });
    }
  }
};
</script>

<style lang="scss"></style>
